import React from 'react'
import '../css/TodoBar.css'
import {TODOKEY,FINISHED,PENDDING} from "./config"

class TodoBar extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            todos:JSON.parse(localStorage.getItem(TODOKEY))||[],
            filterTodos:[]
        }
    }
    
  //创建阶段
  //组件将要挂载
  componentWillMount(){
    // var index = this.state.todos.findIndex((item)=>{
    //     return item.content === this.props.todo.content
    //   })
    //   if(index !== -1){
    //     alert("内容重复")
    //     return
    //   }
    //   this.state.todos.push(this.props.todo)

    // this.setState({
    //   todos:this.state.todos
    // })
    this.setState({
        filterTodos:this.state.todos
    })
  }


    render() {
        console.log(this.props);
        console.log(this.state.todos);
        return(
            <div className="Todo_Bar_container">
                <div className="Todo_Bar_content">
                    <h2>正在进行</h2>
                    <div>
                        
                        {
                            this.state.todos.map((item,index)=>{
                            return <div className="Todo_text" key="index">
                                <div>
                                <input
                                checked={item.status === FINISHED}
                                type="checkbox" onChange={(event)=>{
                                    console.log(event.target.checked);
                                    var checked = event.target.checked
                                    if(checked){
                                        item.status = FINISHED
                                    }else {
                                        item.status = PENDDING
                                    }
                                    this.setState({
                                        todos:this.state.todos
                                    })

                                    this.state.filterTodos = []
                                    this.state.todos.forEach(item => {
                                        if(item.status == FINISHED){
                                            this.state.filterTodos.push(item)
                                        }
                                    });
                                    this.setState({
                                        filterTodos:this.state.filterTodos
                                    })

                                    localStorage.setItem(TODOKEY,JSON.stringify(this.state.todos))
                                }}/>
                                {item.content}
                                </div>
                                <button onClick={()=>{
                                    this.state.todos.forEach((item,index) => {
                                        
                                    });

                                }}>删除</button>
                                </div>
                            })
                        }
                        
                    </div>
                </div>
                <div className="Todo_tool_Bar">
                    <h2>已完成</h2>
                    <div>
                        {
                            this.state.filterTodos.map((item)=>{
                                return <div className="Todo_text">
                                     <div>
                                <input
                                checked={item.status === FINISHED}
                                type="checkbox" onChange={(event)=>{
                                    console.log(event.target.checked);
                                    var checked = event.target.checked
                                    if(checked){
                                        item.status = FINISHED
                                    }else {
                                        item.status = PENDDING
                                    }
                                    this.setState({
                                        todos:this.state.todos
                                    })

                                    // this.state.filterTodos = []
                                    // this.state.todos.forEach(item => {
                                    //     if(item.status == FINISHED){
                                    //         this.state.filterTodos.push(item)
                                    //     }
                                    // });
                                    // this.setState({
                                    //     filterTodos:this.state.filterTodos
                                    // })

                                    localStorage.setItem(TODOKEY,JSON.stringify(this.state.todos))
                                }}/>
                                {item.content}
                                </div>
                                <button>删除</button>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
    componentDidMount(){
    
    }

    //更新阶段
    componentWillReceiveProps(props){
        this.props = props

        var index = this.state.todos.findIndex((item)=>{
            return item.content === this.props.todo.content
        })

        if(index !== -1){
            alert("内容重复")
        }
        this.state.todos.push(this.props.todo)
        localStorage.setItem(TODOKEY,JSON.stringify(this.state.todos))
        this.setState({
            todos:this.state.todos
        })
    }


    shouldComponentUpdate(){
        return true
    }
    componentWillUpdate(){

    }
    componentDidUpdate () {

    }
}

export default TodoBar